<template>
        <CommonAttr></CommonAttr>
        <el-form style="height: 500px;  overflow-y: auto" >
            <el-form-item label="标题">
                <el-input v-model="propValue.option.title.text"  > </el-input>
            </el-form-item>
            <el-form-item label="背景色">
                <el-color-picker v-model="propValue.option.backgroundColor" show-alpha>
                </el-color-picker>
            </el-form-item>            
            <el-form-item label="边框">
                <el-switch v-model="propValue.border"></el-switch>
            </el-form-item>     
            <el-form-item label="图例">
                <el-switch v-model="propValue.option.legend.show"></el-switch>
            </el-form-item>                        
            <el-form-item label="曲线点数">
                <el-input v-model="propValue.pointNums"  > </el-input>
            </el-form-item>
            <el-form-item label="曲线颜色定义">
                <el-color-picker v-for="(item, index) in curComponent.hg3000.linkids"  
                    v-model="propValue.option.color[index]" show-alpha>
                </el-color-picker>
            </el-form-item>
            <el-form-item label="Y轴最小值">
                <el-input v-model="propValue.option.yAxis.min"  > </el-input>
            </el-form-item>
            <el-form-item label="Y轴最大值">
                <el-input v-model="propValue.option.yAxis.max"  > </el-input>
            </el-form-item>
        </el-form>

</template>

<script>

import CommonAttr from '@/custom-component/common/CommonAttr.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
// import {ArrowDown} from "@element-plus/icons";

export default {
    components: { CommonAttr, ArrowDown },
    data() {
        return {
            charts: [
                {
                    title: 'bar',
                    name: '柱状图',
                },
                {
                    title: 'scatter',
                    name: '散点图',
                },
                {
                    title: 'line',
                    name: '折线图',
                },
            ],

            strXLabel : "aaa",
            strYValue : "",
        }
    },
    computed: {
        curComponent() {
            return this.$store.state.curComponent
        },
        option() {
            return this.$store.state.curComponent.propValue.option
        },
        propValue() {
            return this.$store.state.curComponent.propValue
        },
    },

    methods: {
        addPoints(  ){
            this.curComponent.propValue.option.series[0].data.push( 12 )
            this.curComponent.propValue.option.xAxis.data.push( '' )
        },

    },
}
</script>

<style>
.attr {
    margin: 13px;
}
</style>
